<template>
  <div class="bigBox container-fluid">
    <div class="row justify-content-center">
      <div class="col-9">
        <!-- title -->
        <div class="row title justify-content-center">
          <div class="col-8">
            <p>{{title}}</p>
          </div>
        </div>
        <!-- nav -->
        <div class="row nav justify-content-center">
          <div class="col-12 navBox" ref="nav">
            <div @click="change($event,item.id)" :class="['item',index==item.id?'itemTrue':'']" v-for="item in result.nav" :key="item.id">{{item.navName}}</div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="row infoBox justify-content-between" v-for="item in cardInfo" :key="item.id" v-show="cardInfo.length!=0">
          <div class="col-md-4 col-12 text">
            <p>{{item.title}} </p>
            <p>
              {{item.info}}
            </p>
          </div>
          <div class="col-md-6 col-12  imgBox">
            <img :src="item.imgUrl">
          </div>
        </div>
        <!-- 无数据 -->
        <div class="row jusify-content-center" v-show="cardInfo.length==0">
          <div class="col-12" style="text-align:center;padding-top:2rem ;min-height:20rem">暂时没有数据哦~</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      "index": 0,
      "title": "客户案例",
      "cardInfo": [],
      "result": {
        "nav": [
          { 'id': 0, 'navName': "全部" },
          { 'id': 1, 'navName': "大型企业" },
          { 'id': 2, 'navName': "社交" },
          { 'id': 3, 'navName': "金融" },
          { 'id': 4, 'navName': "电商" },
          { 'id': 5, 'navName': "教育" },
        ],
        "info": [
          {
            "id": 0,
            "f_id": 1,
            "title": "天涯立支花",
            "info": "天涯社区旗下的现⾦贷系统。涵盖⽤户⻛控，资⾦路由分发，数据 分析等 核⼼功能。",
            "imgUrl": "https://lanhu.oss-cn-beijing.aliyuncs.com/ps708cb24d9b78b64d-e83e-4334-992a-4439aa2842c4"
          },
          {
            "id": 1,
            "f_id": 3,
            "title": "天涯立支花",
            "info": "天涯社区旗下的现⾦贷系统。涵盖⽤户⻛控，资⾦路由分发，数据 分析等 核⼼功能。",
            "imgUrl": "https://lanhu.oss-cn-beijing.aliyuncs.com/ps708cb24d9b78b64d-e83e-4334-992a-4439aa2842c4"
          },
          {
            "id": 2,
            "f_id": 2,
            "title": "天涯立支花",
            "info": "天涯社区旗下的现⾦贷系统。涵盖⽤户⻛控，资⾦路由分发，数据 分析等 核⼼功能。",
            "imgUrl": "https://lanhu.oss-cn-beijing.aliyuncs.com/ps708cb24d9b78b64d-e83e-4334-992a-4439aa2842c4"
          },
          {
            "id": 3,
            "f_id": 1,
            "title": "天涯立支花",
            "info": "天涯社区旗下的现⾦贷系统。涵盖⽤户⻛控，资⾦路由分发，数据 分析等 核⼼功能。",
            "imgUrl": "https://lanhu.oss-cn-beijing.aliyuncs.com/ps708cb24d9b78b64d-e83e-4334-992a-4439aa2842c4"
          },
          {
            "id": 4,
            "f_id": 5,
            "title": "天涯立支花",
            "info": "天涯社区旗下的现⾦贷系统。涵盖⽤户⻛控，资⾦路由分发，数据 分析等 核⼼功能。",
            "imgUrl": "https://lanhu.oss-cn-beijing.aliyuncs.com/ps708cb24d9b78b64d-e83e-4334-992a-4439aa2842c4"
          },
          {
            "id": 5,
            "f_id": 5,
            "title": "天涯立支花",
            "info": "天涯社区旗下的现⾦贷系统。涵盖⽤户⻛控，资⾦路由分发，数据 分析等 核⼼功能。",
            "imgUrl": "https://lanhu.oss-cn-beijing.aliyuncs.com/ps708cb24d9b78b64d-e83e-4334-992a-4439aa2842c4"
          },
          {
            "id": 6,
            "f_id": 2,
            "title": "天涯立支花",
            "info": "天涯社区旗下的现⾦贷系统。涵盖⽤户⻛控，资⾦路由分发，数据 分析等 核⼼功能。",
            "imgUrl": "https://lanhu.oss-cn-beijing.aliyuncs.com/ps708cb24d9b78b64d-e83e-4334-992a-4439aa2842c4"
          },
          {
            "id": 7,
            "f_id": 2,
            "title": "天涯立支花",
            "info": "天涯社区旗下的现⾦贷系统。涵盖⽤户⻛控，资⾦路由分发，数据 分析等 核⼼功能。",
            "imgUrl": "https://lanhu.oss-cn-beijing.aliyuncs.com/ps708cb24d9b78b64d-e83e-4334-992a-4439aa2842c4"
          },
          {
            "id": 8,
            "f_id": 2,
            "title": "天涯立支花",
            "info": "天涯社区旗下的现⾦贷系统。涵盖⽤户⻛控，资⾦路由分发，数据 分析等 核⼼功能。",
            "imgUrl": "https://lanhu.oss-cn-beijing.aliyuncs.com/ps708cb24d9b78b64d-e83e-4334-992a-4439aa2842c4"
          },
          {
            "id": 9,
            "f_id": 2,
            "title": "天涯立支花",
            "info": "天涯社区旗下的现⾦贷系统。涵盖⽤户⻛控，资⾦路由分发，数据 分析等 核⼼功能。",
            "imgUrl": "https://lanhu.oss-cn-beijing.aliyuncs.com/ps708cb24d9b78b64d-e83e-4334-992a-4439aa2842c4"
          },


        ]
      }
    }
  },
  mounted() {
    this.index = 0
    this.cardInfo = this.result.info
  },
  methods: {
    change(e, id) {
      this.cardInfo = []
      this.index = id
      if (id == 0) {
        this.cardInfo = this.result.info
        console.log("显示全部")
        return;
      }
      this.result.info.forEach(element => {
        if (element.f_id == id) {
          this.cardInfo.push(element)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.bigBox {
  padding: 7.44rem 0;
  .title {
    p {
      text-align: center;
      font-size: 3rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
  }
  .nav {
    cursor: pointer;

    border-bottom: 0.15rem solid #dcdcdc;
    .navBox {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .item {
      padding: 1rem 0.5rem;
    }
    .itemTrue {
      color: #5cd0db;
      border-bottom: 0.3rem solid #5cd0db;
    }
  }

  .infoBox {
    margin: 6rem 0;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rem 0rem 1rem 0rem rgba(0, 0, 0, 0.19);
    border-radius: 1rem;
    //   height: 18rem;
    padding: 2rem 3rem;
    box-sizing: border-box;
    align-items: center;
    .text {
      // margin-top: 50%;
      p:nth-child(1) {
        font-size: 2rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      p:nth-child(2) {
        font-size: 1rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
      }
    }
    .imgBox {
      text-align: center;
      img {
        display: inline-block;
        width: auto;
        max-width: 100%;
        max-height: 18rem;
      }
    }
  }
}
</style>